<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="用户ID">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.uuid"
                        placeholder="请输入用户ID"
                        clearable
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="订单号">
                    <el-input
                            class="w-[280px]"
                            v-model="queryParams.order_no"
                            placeholder="请输入订单号"
                            clearable
                            @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="支付单号">
                    <el-input
                            class="w-[280px]"
                            v-model="queryParams.payment_trade"
                            placeholder="请输入订单号"
                            clearable
                            @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="商户号">
                    <el-input
                        class="w-[280px]"
                        v-model="queryParams.mch_info"
                        placeholder="请输入用户昵称/姓名/手机号"
                        clearable
                        @keyup.enter="resetPage"
                    />
                </el-form-item>
                <el-form-item label="处理状态">
                    <el-select class="w-[280px]" v-model="queryParams.status" clearable>
                        <template v-for="item in statusList">
                            <el-option :value="item.id" :label="item.name">{{item.name}}</el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="原路退回状态">
                    <el-select class="w-[280px]" v-model="queryParams.authority_refund" clearable>
                        <template v-for="item in authorityRefundList">
                            <el-option :value="item.id" :label="item.name">{{item.name}}</el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="红包退款状态">
                    <el-select class="w-[280px]" v-model="queryParams.red_refund" clearable>
                        <template v-for="item in redRefundList">
                            <el-option :value="item.id" :label="item.name">{{item.name}}</el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                    <el-button type="success" @click="exportTable">导出</el-button>
<!--                    <el-button type="success" >导入</el-button>-->
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <el-table size="large" v-loading="pager.loading" :data="pager.lists" style="width: 100%">
                <el-table-column label="用户ID/姓名" prop="username" min-width="100">
                    <template #default="{ row }">
                       {{row.user.id +  ' / ' + row.user.username}}
                    </template>
                </el-table-column>
                <el-table-column label="订单号" prop="order_no" min-width="200"></el-table-column>
                <el-table-column label="支付单号" prop="payment_trade" min-width="200"></el-table-column>
                <el-table-column label="订单金额" prop="amount_real" min-width="200"></el-table-column>
                <el-table-column label="退款金额" prop="refund_real" min-width="200"></el-table-column>
                <el-table-column label="已退金额" prop="has_real" min-width="200"></el-table-column>
                <el-table-column label="支付方式" prop="payment_name" min-width="200"></el-table-column>
                <el-table-column label="对应商户" prop="mch_info" min-width="200"></el-table-column>
                <el-table-column label="处理状态" prop="status_name" min-width="200"></el-table-column>
                <el-table-column label="处理备注" prop="remark" min-width="200"></el-table-column>
                <el-table-column label="原路退款" prop="authority_refund_status_name" min-width="200"></el-table-column>
                <el-table-column label="原路退款备注" prop="authority_refund_remark" min-width="200"></el-table-column>
                <el-table-column label="红包退款" prop="red_refund_status_name" min-width="200"></el-table-column>
                <el-table-column label="红包退款备注" prop="red_refund_remark" min-width="200"></el-table-column>
                <el-table-column label="操作管理员" prop="admin_name" min-width="200"></el-table-column>
                <el-table-column label="创建时间" prop="created_at" min-width="200"></el-table-column>
                <el-table-column label="操作面板" min-width="160" fixed="right">
                    <template #default="{ row }">
                        <el-button type="danger" link @click="removeFun(row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { refundList, refundImport, refundRemove } from '@/api/order'
import { usePaging } from '@/hooks/usePaging'
import router, { getRoutePath } from '@/router'
import feedback from "@/utils/feedback";

const queryParams = reactive({
    uuid: '',
    order_no: '',
    payment_trade: '',
    mch_info: '',
    status: '',  // 处理状态【1：待处理|2：退款成功|3：退款失败】不传默认全部
    authority_refund: '',  // 【1：待处理|2：退款成功|3：退款失败】不传默认全部
    red_refund: '',  // 【1：待处理|2：退款成功|3：退款失败】不传默认全部
    export: false
});

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: refundList,
    params: queryParams
});

getLists();


// 处理状态
const statusList = ref([
    {id: 1, name: '待处理'},
    {id: 2, name: '退款成功'},
    {id: 3, name: '退款失败'},
]);

// 原路退回状态
const authorityRefundList = ref([
    {id: 1, name: '待处理'},
    {id: 2, name: '退款成功'},
    {id: 3, name: '退款失败'},
]);

// 红包退款状态
const redRefundList = ref([
    {id: 1, name: '待处理'},
    {id: 2, name: '退款成功'},
    {id: 3, name: '退款失败'},
]);


// 删除用户
const removeFun = async (id: number) => {
    await feedback.confirm('确定撤销该退款？');
    refundRemove({id})
    getLists()
};

// 导出
const userStore = useUserStore()
import { urlDownload } from '@/utils/download';
import useUserStore from "@/stores/modules/user";
const exportTable = async () => {
    queryParams.export = true;
    let baseUrl = `/v2/admin.shop.lead_red/list?authorization=${userStore.token}&`;
    Object.entries(queryParams).forEach((res, index) => {
        baseUrl += `${res[0]}=${res[1]}${Object.entries(queryParams).length == index+1 ? '' : '&'}`
    });
    await urlDownload(baseUrl);
    queryParams.export = false;
};

</script>
